<template>
  <div>
    <div class="head">
      <el-button type="primary" size="small" @click="visiable=true">添加</el-button>
    </div>
    <div>
      <el-table :data="tableData">
        <el-table-column label="ID" width="50px" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column label="内容" align="center">
          <template slot-scope="scope">
            <span class="name">{{scope.row.content}}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.orderBy}}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page="index"
          :page-size="pageSize"
          :page-sizes="[10,20]"
          layout="total,sizes,prev, pager, next,jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="visiable" width="600px">
      <el-form :model="form">
        <el-form-item label="内容">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="form.content"
            maxlength="500"
            rows="5"
          />
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            :action="action"
            :headers="header"
            list-type="picture"
            :limit="limit"
            :on-exceed="exceed"
            :file-list="fileList"
            :on-success="uploadSuccess"
            :on-remove="remove"
          >
            <el-button v-if="fileList.length<=6" type="primary" size="small">上传图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="排序">
          <el-input placeholder="值越小越靠前" v-model="form.orderBy" />
        </el-form-item>
      </el-form>
      <div class="bottom">
        <el-button type="primary" size="small" @click="add">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, list, del } from "../../api/content";
import { getToken } from "@/utils/auth.js";
export default {
  data() {
    return {
      tableData: [],
      title: "添加",
      visiable: false,
      action: "",
      limit: 6,
      header: {},
      fileList: [],
      form: {
        id: null,
        content: "",
        orderBy: 0
      },
      index: 1,
      pageSize: 10,
      total: 0
    };
  },
  mounted() {
    this.action = this.$UPLOAD;
    this.header = { token: getToken() };
    this.initData();
  },
  methods: {
    del(id) {
      del(id).then(res => {
        this.initData()
      });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.initData();
    },
    handleCurrentChange(page) {
      this.index = page;
      this.initData();
    },
    //根据链接获取图片名称
    getNameByUrl(url) {
      let index = url.lastIndexOf("/");
      return url.substring(index + 1);
    },
    edit(data) {
      this.visiable = true;
      this.form.id = data.id;
      this.form.content = data.content;
      this.form.orderBy = data.orderBy;
      this.fileList = [];
      var imgs = data.images.split(",");
      for (var i = 0; i < imgs.length; i++) {
        this.fileList.push({
          name: this.getNameByUrl(imgs[i]),
          url: imgs[i]
        });
      }
    },
    initData() {
      list(this.index, this.pageSize).then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    add() {
      var images = "";

      if (this.fileList.length > 0) {
        for (var i = 0; i < this.fileList.length; i++) {
          if (this.fileList[i].response != null) {
            images += this.fileList[i].response.data + ",";
          } else {
            images += this.fileList[i].url + ",";
          }
        }
      }

      add(
        this.form.id,
        this.form.content,
        images.substr(0, images.length - 1),
        this.form.orderBy
      ).then(res => {
        this.$message({
          type: "success",
          message: res.message
        });
        this.form = {
          id: null,
          content: "",
          orderBy: 0
        };
        this.fileList = [];
        this.visiable = false;
        this.initData();
      });
    },
    /**
     * 移除成功
     */
    remove(file, fileList) {
      this.fileList = fileList;
    },
    /**
     * 上传成功
     */
    uploadSuccess(response, file, fileList) {
      if (response.code === 2000) {
        this.fileList = fileList;
      } else {
        this.$message({
          type: "warning",
          message: response.message
        });
      }
    },

    /**
     * 超出图片限制
     */
    exceed() {
      this.$message({
        type: "warning",
        message: "超出限制"
      });
    }
  }
};
</script>

<style scoped>
.head {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.bottom {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
}
.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 100px;
  align-items: center;
}
</style>

